<template>
  <svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern
        id="smallGrid"
        width="7.236328125"
        height="7.236328125"
        patternUnits="userSpaceOnUse"
      >
        <path
          d="M 7.236328125 0 L 0 0 0 7.236328125"
          fill="none"
          stroke="rgba(207, 207, 207, 0.3)"
          stroke-width="1"
        />
      </pattern>
      <pattern id="grid" width="36.181640625" height="36.181640625" patternUnits="userSpaceOnUse">
        <rect width="36.181640625" height="36.181640625" fill="url(#smallGrid)" />
        <path
          d="M 36.181640625 0 L 0 0 0 36.181640625"
          fill="none"
          stroke="rgba(186, 186, 186, 0.5)"
          stroke-width="1"
        />
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)" />
  </svg>
</template>

<style>
.grid {
  @apply absolute top-0 left-0;
}
</style>
